<!DOCTYPE html>
<html>
<head>
	<title>照片忆书</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/book_page.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoBook.css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoBottom.css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoNew.css">
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/zepto.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/modernizr.2.5.3.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js">
	</script>
<style type="text/css">
	/** { touch-action: none; }*/
	.style_img{width:75%;}
	.three{
		width: 6.613333rem;
		height: 8.56rem;
		left: 0.8rem;
		position: absolute;
		overflow: hidden;
		top: 1.333333rem;
	}
	.container {
		box-shadow: 0 1px 6px rgba(140,140,140,.5);
	}
	.left{
		float: left;

	}
	.trim{
		width: 3.173333rem;
	    height: 4.293333rem;
	}
	.trim_right{
		margin-left:0.266667rem;
	}
	.conversion_bot{
		 width: 6.64rem;
	    height: 4.0rem;
	    margin-top: 0.266667rem;
	}
	.imgDiv{
		background: #fff;
	}
	/*横条样式*/  
	input#range{
		-webkit-appearance: none;/*清除系统默认样式*/  
		width: 100%; 
		height: 0.16rem;/*横条的高度*/
		background: -webkit-linear-gradient(#63E0CE, #63E0CE) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/  
		background-size: 0 100%;/*设置左右宽度比例*/  
		outline: none;
		border-radius: 4px;
		margin: 0.25rem 0;
	}  
	/*拖动块的样式*/  
	input#range::-webkit-slider-thumb {
		-webkit-appearance: none;/*清除系统默认样式*/  
		height: 0.48rem;/*拖动块高度*/  
		width: 0.48rem;/*拖动块宽度*/  
		background: #fff;/*拖动块背景*/  
		border-radius: 50%; /*外观设置为圆形*/  
		box-shadow: 0 0 5px rgba(128,128,128,0.5);  /*设置阴影*/
		border: none;
	}
	.imgbox1{
		position: absolute;
		width: 7.72rem;
	    height: 4.88rem;
	    left: 0.28rem;
	    top: 4.1rem;
		overflow: hidden;
		background-color: #fff;
	}
	.imgbox2{
		position: absolute;
		top: 0.03rem;
	    left: 1.19rem;
	    width: 7.08rem;
	    height: 7.34rem;
		overflow: hidden;
		background-color: #fff;
	}
	.imgbox3{
		width: 5.32rem;
	    height: 8rem;
	    position: absolute;
	    top: 1.24rem;
	    left: 0.84rem;
		overflow: hidden;
		background-color: #fff;
	}
	.shape_0{ 	/*长图	width/height	*/
		position: absolute; 
		height: 100%;
		left: 50%;
		top: 0;
		transform: translate(-50%);
	}
	.shape_1{ 	/*方图*/
		position: absolute; 
		height: 100%;
		/*width: 100%;*/
		left: 50%;
		top: 0;
		transform: translate(-50%);
	}
	.shape_2{ 	/*横图*/
		position: absolute; 
		width: 100%;
		left: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	.zhebck{
		width: 100%;
		height:100%;
		background: rgba(0,0,0,0.70);
		position: absolute;
		top:0;
		left:0;
		z-index: 98;
	}
	.dianji{
		width:5.466667rem;
		height:4.426667rem;
		position: absolute;
		top:6.32rem;
		left:1.92rem;
		z-index: 99;
	}
	.shou{
		width:1.2rem;
		height:1.2rem;
		position: absolute;
		top:11.706667rem;
		left:7.12rem;
		z-index: 99;
	}
</style>

</head>
<body>
<input type="hidden" id="pbsId" value="{$bookId.style}">
<input type="hidden" id="pbTitle" value="{$bookId.pbTitle}">
<input type="hidden" id="coveishape" value="{$shape}">
	<div class="container_container">
		<if condition="$photoStatus eq false">
			<div class="zhezhao">
				<div class="zhebck"></div>
				<div class="dianji"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_first_time_guide_icon.png" class="img"></div>
				<div class="shou"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_first_time_guide_gesture_icon.png" class="img"></div>
			</div>
		</if>
		<div class="main_top">
			<div class="mainImg">
				<div class="fengImg flipbook-viewport">
					<div class="container">
						<div class="flipbook" id="flipbook-viewport">
							<div class="top_container imgDiv">
								<div class="fengmian1" data-page="0">
									<if condition="$personimg">
										<div class="imgbox{$cId}"><img src="http://www.youyiku-yishu.cn/{$personimg}" class="shape_{$shape}"></div>
									</if>									
									<img src="http://www.youyiku-yishu.cn/{$cover}" class="img">
									<div class="mian1_header mian1_header{$bookId.coverId}">{$bookId.bookName}</div>
									<div class="mian1_bottom mian1_bottom{$bookId.coverId}">{$bookId.title}</div>
								</div>
							</div>

							<volist name="photoStatus" id="vo" >
								<div data-page="{$vo.inPage}" class="top_container imgDiv">
								<textarea placeholder="点击此处输入文字"
									class="textarea text{$vv.inPage} text{$vo.inPage}_top {$vo.zimu}_text_{$vo.status}_top">{$vo.text}</textarea>
								<textarea placeholder="点击此处输入文字"
									class="textarea text{$vo.inPage} text{$vo.inPage}_bottom {$vo.zimu}_text_{$vo.status}_bottom">{$vo.text1}</textarea>
									<volist name="vo.photoContent" id="vi">
										<div class="pirc {$vo.zimu}_move{$vi.yw}_{$vo.status}" data-url="{$vi.img}" data-shape="{$vi.shape}">
										</div>
									</volist>
								</div>
							</volist>

							<div class="top_container imgDiv">
								<div class="fengmian1 backcover" data-page="{$Backcover}">
									<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_fengdi.png" class="img">
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="fengText">
					<output class="output">1</output>/
					<span class="zongshu">10</span>
				</div>
				<!-- <div class="gundong">
					<input class="dundong_input" type="range" min="1" max="10" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 1;" value="1">
				</div> -->
				<div class="gundong">
					<input id="range" type="range" min="1" max="10" value="1" >
				</div>
				
			</div>
			<div class="scImg">
				<div class="addImg" onclick="editPhotoBook()">
					<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_home_upload_photos_btn_nor.png" class="img">
				</div>
				<div class="chicun">
				图片尺寸需大于<span class="color">1280*720像素</span><br>
				否则可能没法保证印刷质量哦～
				</div>
			</div>
		</div>
		<div class="main_bot">
			<div class="photo_main">
				<div class="photoName">相册动态</div>
				<div class="photoText">
					<volist name="logList" id="vv">
						<div class="state">
							<div class="state_left left"><img src="{$vv.userPhoto}" class="img radius"></div>
							<div class="state_right left">
								<div class="stateName">
									<span class="userName">{$vv.userName}</span>
									<if condition="$vv['type'] eq 1">
										<span class="true">上传了{$vv.long}张照片</span>
										<elseif condition="$vv['type'] eq 3"/>
										<span class="true">加入了制作</span>
									</if>
								</div>

								<div class="stateText none"></div>
								<div class="stateImg">
									<if condition="$vv['type'] eq 1">
										<volist name="vv.content" id="vp">
											<div class="state_img left">
												<img src="http://www.youyiku-yishu.cn/{$vp}" class="img" />
											</div>
										</volist>

									</if>
								</div>
								<div class="stateTime">{$vv.friendlyTime}</div>
							</div>
						</div>
					</volist>
					<div class="state">
						<div class="state_left left"><img src="{$masterMsg.head_pic}" class="img radius"></div>
						<div class="state_right left">
							<div class="stateName">
								<span class="userName">{$masterMsg.nickname}</span>
								<span class="true">创建了本书</span>
							</div>
							<div class="stateText">欢迎来到优忆库照片书制作属于自己的相册只需上传照片，选择想要的相册样式，我们忆书会帮你完成其余的工作的；最惊喜的是相册书还可以添加成员(点击我的)一起给相册传照片，让这本相册更有意义快快上传图片吧
							</div>

							<div class="stateTime">{$masterMsg.friendlyTime}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<input type="hidden" id="pbId" value="{$bookId.photoBookId}">

		<div class="footer">
			<ul class="footer_ul">
				<li class="footer_li left" onclick="editPhotoBook()">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_nav_edit_icon_sel.png"></div>
					<span class="footer_text footer_color">点击编辑</span>
				</li>
				<li class="footer_li left" onclick="myBooks()">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_nav_me_icon_nor.png"></div>
					<span class="footer_text">我的</span>
				</li>
				<li class="footer_li left" onclick="goHuodong()">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_huodong_icon_nor.png"></div>
					<span class="footer_text">活动</span>
				</li>
			</ul>
		</div>
	</div>

<script type="text/javascript">
var zong = $('.imgDiv').length;
$('.zongshu').text(zong);
var page=0;
//alert("shape:"+$("#coveishape").val() );
$(function progressbar(){
	var w = $(".graph").width();
	setTimeout(function(){$('#bar').animate({width:w});},500);
	setTimeout(function(){$(".flipbook-viewport").show();},1000);
});
window.onload = function(){
	//进度条   
    $('#range').attr('max',zong).on("change",change);

	function change(){	
		var rangevalue = $('#range').val()
		$('.output').html(rangevalue);
		$("#range").css({
			"backgroundSize": (rangevalue-1)*100/(zong-1)+"%"+" 100%"
		});

		$('.flipbook').turn("page",rangevalue);
		lazyload();
	}
	
	//懒加载
	function lazyload(){	
		console.log($(".imgDiv"));
		$(".imgDiv").each(function(){
			$(this).find(".pirc").each(function(){
				var This = this;
				var data_src = $(this).data("url");
				var data_shape = $(this).data("shape");
				
				var img = new Image();
				img.src = "http://www.youyiku-yishu.cn/"+data_src;
				img.className = "pirc_img";
				if(data_shape == 0){
					$(img).attr("style","height:100%;position:absolute;top:0;left:50%;transform: translate(-50%,0);");
    			}else if(data_shape == 1){
    				$(img).attr("style","height:100%;width:100%");
    			}else{
    				$(img).attr("style","width:100%;position:absolute;top:50%; left:50%;transform: translate(-50%,-50%);");
    			}
				img.onload = function(){
					$(This).append(img);	
				}		
			});
		})
	}
	$('.zhezhao').click(function(){
		$('.zhezhao').css('display','none');
	})
	function loadApp() {
		var w=$('.fengImg').width();
		var h=$('.fengImg').height();
		$('.flipboox').width(w).height(h);
		$('.fengImg').resize(function(){
		w=$('.fengImg').width();
		h=$('.fengImg').height();
		$('.flipboox').width(w).height(h);
		});
	$('.flipbook').turn({
		// Width
		width:w,
		// Height
		height:h,
		// Elevation
		elevation: 50,
		display :'single',
		// Enable gradients
		gradients: true,
		acceleration:true,
		// Auto center this flipbook
		autoCenter: true,
		pages:zong,

		when:{
　　　　　　turned: function(e, page) {
				lazyload();
　　　　　　}
　　　　}
	});
	//当翻书时，让进度条也跟着走   ...但是每50ms运行一次定时器- -感觉很消耗性能!!
	setInterval(isAnimating,500);
	function isAnimating(){
		if( $(".flipbook").turn("animating") ){
			$('#range').val( $('.output').html() )
			$("#range").css({
				"backgroundSize": ($('#range').val()-1)*100/(zong-1)+"%"+" 100%"
			});
		}
	};
}
	// Load the HTML4 version if there's not CSS transform
	yepnope({
	  test : Modernizr.csstransforms,
	  yep: ['http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/turn.js'],
	  nope: ['http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/turn.html4.min.js'],
	  complete: loadApp
	});
	var WST = ThinkPHP = window.Think = {
		"ROOT"   : "__ROOT__",
	}
}
	
//屏蔽ios下上下弹性
// $(window).on('scroll.elasticity', function (e) {
//   e.preventDefault();
// }).on('touchmove.elasticity', function (e) {
//   e.preventDefault();
// });

</script>
	<include file="./Apps/WebApp/View/default/common_js.html" />
<!-- <script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/rangeslider.min.js"></script> -->
<script>
	var pbId=$('#pbId').val()
	function editPhotoBook(){
		localStorage.setItem('isUploadAll',false);
		//localStorage.setItem('uploadImgPage'+pbId,0);
		location.href= WST.U('WebApp/PhotoBooks/edit', 'pbId='+pbId);
	}
	function myBooks(){
		location.href= WST.U('WebApp/PhotoBooks/myBooks', 'pbId='+pbId);
	}
	function goHuodong(){
		location.href= WST.U('WebApp/PhotoBooks/goHuodong', 'pbId='+pbId);
	}


var pbsId = $("#pbsId").val();
var pbTitle = $("#pbTitle").val();
changePbStyle(pbsId,pbTitle);
function changePbStyle(id,pbtitle){
    $(".imgDiv:odd").css({"background":"url(http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/pbStyle/"+pbtitle+"_odd_"+id+".png) no-repeat","backgroundSize":"100% 100%"});
    $(".imgDiv:even").css({"background":"url(http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/pbStyle/"+pbtitle+"_even_"+id+".png) no-repeat","backgroundSize":"100% 100%"});
}
	
</script>
</body>
</html>